<template>
    <div class="spatial_dynamics">
        <div class="spatial clearFix">
            <div class="avatar">
                <el-avatar :size="60" src="@a/img/headportrait01.jpg" @error="errorHandler">
                    <img src="@a/img/headportrait01.jpg"/>
                </el-avatar>
            </div>
            <div class="spatial_content">
                <p>
                    <el-button type="text">李云：</el-button>
                    <span class="content">
                        重庆洪崖洞好耍不？
                    </span>
                </p>
                <ul class="photo_list clearFix">
                    <li v-for="(index,key) in srcList" :key="key">
                        <el-image :src="index" :preview-src-list="srcList" fit="fill">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </li>
                </ul>
                <div class="release_time clearFix">
                    <div class="time_warp">
                        <span>2020-04-18</span>
                        <span>10:31</span>
                    </div>
                    <div class="share_warp">
                        <span><i class="el-icon-view"></i>1</span>
                        <el-divider direction="vertical"></el-divider>
                        <span><i class="iconfont icon-zan"></i>1</span>
                        <el-divider direction="vertical"></el-divider>
                        <span @click="show3 = !show3"><i class="el-icon-chat-dot-round"></i>1</span>
                        <el-divider direction="vertical"></el-divider>
                        <span @click="dialogTableVisible=true"><i class="iconfont icon-fenxiang"></i>1</span>
                    </div>
                </div>
                <el-dialog width="600px" title="转发动态" :visible.sync="dialogTableVisible">
                    <div class="forward">
                        <div class="forward_to">
                            <span>转发到：</span>
                            <span :class="forwardTo? 'tab active':'tab'" @click="forwardTo=true">我的空间</span>
                            <el-divider direction="vertical"></el-divider>
                            <span :class="!forwardTo? 'tab active':'tab'" @click="forwardTo=false">好友圈</span>
                        </div>
                        <div class="explain" v-if="!forwardTo">
                            将微博定向转发到好友圈，只有你的好友可见这条微博
                        </div>
                        <div class="forward_article">
                            这是转发内容
                        </div>
                        <Comment></Comment>
                    </div>
                </el-dialog>
                <el-collapse-transition>
                    <div class="comment_warp" v-show="show3">
                        <Comment></Comment>
                        <el-divider direction="horizontal"></el-divider>
                        <CommentReply></CommentReply>
                    </div>
                </el-collapse-transition>
            </div>
        </div>
        <el-button type="text">查看更多动态</el-button>
    </div>
</template>

<script>
    import Comment from "@c/comment/comment"
    import CommentReply from "@c/comment/CommentReply"

    export default {
        data(){
            return{
                srcList:[
                    require('../../assets/img/headportrait01.jpg'),
                    require('../../assets/img/headportrait02.jpg'),
                    require('../../assets/img/headportrait03.jpg')
                ],
                show3:false,
                dialogTableVisible: false,
                forwardTo:true
            }
        },
        components:{
            Comment,
            CommentReply
        },
        methods:{
            errorHandler(){
                return true
            }
        }
    }
</script>

<style lang="scss" scoped>
.spatial_dynamics{
    box-sizing: border-box;
    .spatial{
        .avatar{
            float: left;
        }
        .spatial_content{
            float: left;
            width: calc(100% - 75px);
            margin-left: 10px;
            box-sizing: border-box;
            padding: 5px;
            text-align: left;
            border:1px solid #ccc;
            p{
                margin-block-start: .5em;
                margin-block-end: .5em;
                .content{
                    font-size: 15px;
                    color: #909399;
                }
            }
            .photo_list{
                list-style-type: none;
                padding-inline-start: 0;
                li{
                    float: left;
                    box-sizing: border-box;
                    padding: 5px;
                    width: 150px;
                    height: 150px;
                    border:1px solid #ccc;
                    margin-right: 10px;
                    margin-bottom: 10px;
                }
            }
            .release_time{
                box-sizing: border-box;
                padding: 5px 10px;
                .time_warp{
                    color: #909399;
                    font-size: 12px;
                    float: left;
                    span:last-child{
                        margin-left: 15px;
                    }
                }
                .share_warp{
                    float: right;
                    span{
                        color: #909399;
                        font-size: 12px;
                        cursor: pointer;
                        i{
                            font-size: 14px;
                            margin-right: 4px;
                        }
                    }
                }
            }
            .comment_warp{

            }
        }
    }
}
.clearFix::after{
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
.forward{
    .forward_to{
        box-sizing: border-box;
        padding: 10px;
        .tab{
            box-sizing: border-box;
            padding-bottom: 4px;
            cursor: pointer;
        }
        .active{
            color:#409EFF;
            border-bottom: 1px solid #409EFF;
        }
    }
    .explain{
        box-sizing: border-box;
        padding: 5px;
        color: white;
        font-size: 14px;
        text-align: center;
        background-color: #409EFF;
        margin: 8px 0;
        border-radius: 4px;
    }
    .forward_article{
        margin: 8px 0;
        box-sizing: border-box;
        padding: 5px 10px;
        border: 1px solid #909399;
        text-align: left;
        border-radius: 4px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
}
</style>